<template>
  <div class="card">
    <a-card title="图例" :bordered="false" v-show="isshow">
      <p>
        <div style="background:red;'"></div><span>非常拥堵</span>
      </p>
      <p>
        <div style="background:rgb(255, 127, 0)"></div><span>拥堵</span>
      </p>
      <p>
        <div style="background:rgb(255, 255, 0)"></div><span>行驶缓慢</span>
      </p>
      <p>
        <div style="background:rgb(139, 209, 0)"></div><span>基本畅通</span>
      </p>
      <p>
        <div style="background:rgb(56, 167, 0)"></div><span>畅通</span>
      </p>
    </a-card>
  </div>
</template>

<script setup>
import {ref, onUnmounted } from 'vue'
import mitt from '@/mitt'
import Road from '../Hooks/Road'
const { showRoad, closeRoad } = Road()
const { map } = defineProps({
  map: {
    type: Object,
  },
})
const isshow = ref(false)
const showRoads = () => {
  showRoad(map)
  isshow.value=true
}
const closeRoads = () => {
  closeRoad(map)
  isshow.value=false
}
mitt.on('showRoad', showRoads)
mitt.on('closeRoad', closeRoads)
onUnmounted(() => {
  mitt.off('showRoad', showRoad)
  mitt.off('closeRoad', closeRoad)
})
</script>

<style lang="stylus" scoped>
.card
  position:absolute
  top 40%
  left:70%
  z-index:200
.card
  .ant-card
    width: 150px
    height:260px
.card
  p
    display: flex
    line-height: 17px 
.card
  p
    div
      width: 17px
      height: 17px
      background-color: pink
.card
  span
    padding-left: 20px
    font-size:10px
    font-weight:500
</style>
